import { CarouselItemComponent } from './carousel-item.component';
import { Component, OnInit, EventEmitter, Input, Output, AfterContentChecked, OnChanges, OnDestroy, QueryList, ContentChildren, SimpleChanges, forwardRef } from '@angular/core';
import { carouselBtnLeftAnimation, carouselBtnRightAnimation } from './animations';


@Component({
  selector: 'el-carousel',
  animations: [carouselBtnLeftAnimation, carouselBtnRightAnimation],
  templateUrl: './carousel.component.html'
})
export class CarouselComponent implements AfterContentChecked, OnChanges, OnDestroy {
  @Input() height: string = '150px';
  @Input() trigger: string = 'click';
  @Input() indicatorTrigger: string = 'click';
  @Input() autoplay: boolean = true;
  @Input() interval: number = 3000;
  @Input('initial-index') initialIndex: number = 0;
  @Input('indicator-position') indicatorPosition: string = '';
  @Input() arrow: string = 'hover';
  @Input() type: string = '';
  @Input() model: number = 0;
  @Input() loop: Boolean = true;
  @Input() direction: string = 'horizontal';
  carouselHover: boolean = false;
  @Output() modelChange: EventEmitter<any> = new EventEmitter();
  @ContentChildren(forwardRef(() => CarouselItemComponent)) children!: QueryList<CarouselItemComponent>;

  subscriber: any = [];
  items: any = [];
  hasLabel: boolean = false;
  timer: number=0;
  // timer: any;
  constructor() {
  }

  mouseEvent(bool: boolean) {
    this.carouselHover = bool;
  }


  btnActionHandle(nextValue: number, eventType: string): void {
    if (this.trigger !== eventType) return
    this.autoplay && this.resetInterval()
    this.setActiveItem(nextValue)
  }

  indicatorActionHandle(nextValue: number, eventType: string): void {
    if (this.indicatorTrigger !== eventType) return
    this.autoplay && this.resetInterval()
    this.setActiveItem(nextValue)
  }

  setActiveItem(index: number): void {
    if (!this.children) return

    const len = this.children.length
    var nextValue = 0;//index >= len ? 0 : index < 0 ? len - 1 : index
    if(index >= len){
      nextValue = this.loop ? 0 : len - 1;
    }else if(index < 0 ){
      nextValue = this.loop ? len - 1 : 0;
    }else{
      nextValue = index;
    }
    this.model = nextValue
    this.subscriber.forEach((func: () => any) => func())
    this.modelChange.emit(this.model)
  }


  resetItemPosition(){
    var len = this.children.length;
    this.children.forEach((item, index) => {
      item.index = index
      item.updateActive()
      item.updateStyles(len)
    });
    return ;
  }

  resetInterval(): void {
    var _this = this;
    ++ this.timer;
    if(this.timer%this.interval === 0) {
      this.timer = 0;
      _this.setActiveItem(_this.model + 1);
    }
  }

  ngAfterContentChecked(): void {
    const timer = setTimeout(() => {
      this.resetItemPosition();
      // all labels are validated
      this.hasLabel = !this.items.some((item: any) => !item)
      // auto play
      this.autoplay && this.resetInterval()
      clearTimeout(timer)
    }, 0)
  }

  ngOnChanges(changes: SimpleChanges): void {
    // not include model
    if (!changes || !changes.model) return
    this.setActiveItem(changes.model.currentValue)
  }

  ngOnDestroy(): void {
    this.timer && clearInterval(this.timer)
  }



}
